<template>
	<view class="empty-box" :style="'padding-top:'+pt+';'">
		<image class="img-empty" v-if="imgName=='empty'" style="width: 240rpx;height:249rpx;margin-bottom: 60rpx;"
			:src="$Common.getFileUrl('static/img/empty.png')"></image>
		<image class="img-noData" v-if="imgName=='noData'" style="width: 240rpx;height:244rpx;margin-bottom: 60rpx;"
			:src="$Common.getFileUrl('static/img/no-data.png')"></image>
		<image class="img-moveData" v-if="imgName=='moveData'" style="width: 240rpx;height:240rpx;margin-bottom: 60rpx;"
			:src="$Common.getFileUrl('static/img/move_data.png')"></image>

		<view class="tips fs-28">
			{{tipsD}}
		</view>
		<view class="tips fs-28" v-if="tips">
			{{tips}}
		</view>
		<view class="btn-back" @click="onBack" v-if="isBack && !btnCustomName">
			<u-button class="btn" type="primary" :plain="true" text="返回"></u-button>
		</view>
		<view class="btn-back" @click="onCustomBtn" v-if="btnCustomName">
			<u-button class="btn" type="primary" :plain="true" :text="btnCustomName"></u-button>
		</view>
	</view>

</template>

<script>
	export default {
		name: "empty",
		props: {
			tipsD: {
				default: '暂无数据',
				type: String
			},
			imgName: {
				default: 'empty',
				type: String
			},
			tips: {
				default: '去体验下其它功能吧',
				type: String
			},
			isBack: {
				default: true,
				type: Boolean
			},

			btnCustomName: {
				default: '',
				type: String
			}, //自定义按钮文字  没有事件

			pt: {
				default: '210rpx',
				type: String
			}
		},
		data() {
			return {
				onCustomBtn() {
					this.$emit('onBtn')
				}
			}
		},
		methods: {
			onBack() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.empty-box {
		height: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.btn-back {
		margin-top: 60rpx;

		::v-deep {
			button {
				width: 140rpx;
				height: 60rpx !important;
			}
		}
	}

	.tips {
		color: $uni-text-color;
	}
</style>
